/* The public landing page.
   UI-1 phase B (6 Oct 2026): moved out of the shared design-system.css, which the Admin portal
   also loads, because only the end-user portal uses it. App.razor links it straight after
   design-system.css, so it keeps its place in the cascade. */

/* =========================================================================
   Eight28 D3 Public Landing layout
   -------------------------------------------------------------------------
   Page-level layout consumed by Theming/PublicHeader.razor,
   Theming/PublicFooter.razor and Pages/Index.razor. Tokens only.
   These rules override the legacy .public-header / .public-footer rules
   above by virtue of source order.
   ========================================================================= */

.section-pad { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

/* ---------- header ---------- */
.public-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--ink);
    backdrop-filter: none;
    border-bottom: 1px solid color-mix(in srgb, var(--neutral-0) 8%, transparent);
    padding: 0;
}
.public-header__inner {
    max-width: 1200px; margin: 0 auto; padding: 12px var(--space-6);
    display: flex; align-items: center; gap: var(--space-6);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-family-heading); font-weight: 700;
    letter-spacing: -0.01em; font-size: var(--font-size-md);
    color: var(--neutral-0); text-decoration: none;
}
.brand__mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--color-primary); color: var(--color-primary-contrast);
    display: grid; place-items: center;
    font-weight: 800; font-size: var(--font-size-base);
}
.brand__text--accent { color: var(--color-primary); }
.public-nav { display: flex; gap: 4px; flex: 1; align-items: center; }
.public-nav a {
    font-size: var(--font-size-md); padding: 6px 12px;
    color: color-mix(in srgb, var(--neutral-0) 65%, transparent); border-radius: var(--radius-sm);
    text-decoration: none; text-transform: none; letter-spacing: normal;
}
.public-nav a:hover { color: var(--neutral-0); background: color-mix(in srgb, var(--neutral-0) 6%, transparent); }
.public-nav a::after { display: none; }
.header-cta { display: flex; gap: 8px; align-items: center; }
/* The menu button (phones) sits on the dark band too. */
.public-header .menu-toggle { color: var(--neutral-0); }

/* Phones: here, after the header's base rules, so it wins (public-site.css loads earlier). */
@media (max-width: 768px) {
    /* The header's links fold behind the menu button, as a panel under the dark band (UI-1 I4: these rules
       targeted .nav-links and .header-actions, which the header no longer has, so the button did nothing and the
       links stayed squeezed into the bar). The desktop buttons hide; the panel has its own. */
    .public-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-3) var(--space-4) var(--space-4);
        background: var(--ink);
        border-top: 1px solid color-mix(in srgb, var(--neutral-0) 8%, transparent);
        box-shadow: 0 8px 16px color-mix(in srgb, var(--black) 20%, transparent);
        z-index: 50;
    }

    .public-nav--open {
        display: flex;
    }

    .public-nav a {
        padding: var(--space-3) var(--space-2);
    }

    .header-cta {
        display: none;
    }
}

/* Ghost "Sign In" button sits on the dark (#0e1c2f) header — override
   the default dark-gray token so text is legible on the dark background. */
.public-header .btn--ghost { color: color-mix(in srgb, var(--neutral-0) 85%, transparent); }
/* On the sign-in page itself, Sign In reads as selected (NavLink adds .active). Bootstrap's .btn.active drew this
   outline by accident until UI-1 phase G put Bootstrap below us; it is kept here on purpose. */
.public-header .btn--ghost.active { border-color: currentColor; }
.public-header .btn--ghost:hover:not(:disabled) {
    color: var(--neutral-0);
    background: color-mix(in srgb, var(--neutral-0) 10%, transparent);
}
/* Primary "Get Started" CTA on the dark header. No primary override existed, so
   the filled teal button could render with no visible fill against the dark
   background (UAT defect). Force the teal fill + contrast text explicitly. */
.public-header .btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
}
.public-header .btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-contrast);
}
/* Visible focus rings on both header buttons against the dark background */
.public-header .btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--neutral-0) 65%, transparent);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- hero ---------- */
.hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(60% 60% at 80% 20%, color-mix(in srgb, var(--color-primary-soft) 55%, transparent), transparent 60%),
      radial-gradient(50% 50% at 10% 90%, color-mix(in srgb, var(--color-primary-soft) 60%, transparent), transparent 60%);
    pointer-events: none; z-index: 0;
}
.hero > .section-pad {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 1fr;
    gap: var(--space-9); align-items: center;
}
@media (max-width: 960px) { .hero > .section-pad { grid-template-columns: 1fr; } }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; border-radius: var(--radius-full);
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm); color: var(--color-text-secondary);
    margin-bottom: var(--space-5); box-shadow: var(--shadow-xs);
}
.eyebrow-dot {
    width: 18px; height: 18px; border-radius: var(--radius-full);
    background: var(--color-primary-soft); color: var(--color-primary-soft-text);
    display: grid; place-items: center; font-size: var(--font-size-xs);
}
.hero h1 {
    font-family: var(--font-family-heading);
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.02; letter-spacing: -0.025em;
    font-weight: var(--font-weight-extrabold); font-stretch: var(--font-stretch-display);
    margin-bottom: var(--space-5); text-wrap: balance;
}
.hero p.lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    max-width: 52ch; margin-bottom: var(--space-6);
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.trust { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- hero visual ---------- */
.hero-visual {
    background: var(--neutral-0); border-radius: var(--radius-xl);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-xl);
    overflow: hidden; transform: rotate(0.4deg);
}
.hero-visual__bar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; background: var(--color-background-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
}
.hero-visual__bar i { width: 9px; height: 9px; border-radius: var(--radius-full); display: inline-block; }
.hero-visual__bar i:nth-child(1) { background: var(--accent-coral); }
.hero-visual__bar i:nth-child(2) { background: var(--amber-500); }
.hero-visual__bar i:nth-child(3) { background: var(--green-500); }
.hero-visual__url { font-size: 11px; color: var(--color-text-muted); margin-left: 8px; font-family: var(--font-family-mono); }
.hero-visual__body { padding: var(--space-5); }
.hero-visual__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-weight: 600; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--space-4); }
.kpi { background: var(--color-background-sunken); border-radius: var(--radius-md); padding: 10px 12px; }
.kpi__label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.kpi__val { font-family: var(--font-family-heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.kpi__delta { font-size: var(--font-size-xs); font-weight: 500; margin-top: 2px; }
.kpi__delta.up { color: var(--color-success); }
.kpi__delta.down { color: var(--color-error); }

/* ---------- logos strip ---------- */
.logos {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-background-sunken);
}
.logos__title {
    text-align: center; font-size: var(--font-size-sm);
    color: var(--color-text-muted); margin-bottom: var(--space-4);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.logos__row { display: flex; justify-content: space-around; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.logos__row span {
    font-family: var(--font-family-heading); font-weight: 700;
    color: var(--color-text-muted); font-size: var(--font-size-xl);
    letter-spacing: -0.02em; opacity: 0.7;
}

/* ---------- features ---------- */
.features { padding: var(--space-12) 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.section-head__tag {
    display: inline-block; font-size: var(--font-size-xs);
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-primary-soft-text); font-weight: 600; margin-bottom: 12px;
}
.section-head h2 {
    font-family: var(--font-family-heading);
    font-size: clamp(28px, 3.5vw, 40px); line-height: 1.1;
    letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; margin-bottom: 12px;
}
.section-head p { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 920px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
.feature {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--motion-base) var(--motion-ease);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.feature__icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary-soft-text);
    display: grid; place-items: center; font-size: var(--font-size-md); margin-bottom: var(--space-3);
}
.feature h3 { font-size: var(--font-size-md); font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* ---------- spotlight ---------- */
.spotlight { padding: var(--space-12) 0; background: var(--color-background-sunken); }
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
@media (max-width: 920px) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight-grid h3 { font-family: var(--font-family-heading); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; }
.spotlight-grid p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.spotlight-list { list-style: none; padding: 0; }
.spotlight-list li { display: flex; gap: 10px; padding: 8px 0; font-size: var(--font-size-md); }
.spotlight-tick { color: var(--color-success); margin-top: 3px; }
.spotlight-mock { background: var(--neutral-0); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-4); }
.spotlight-mock__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; }
.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: var(--space-3); }
.swatch {
    aspect-ratio: 1; border-radius: var(--radius-md);
    display: flex; align-items: flex-end; padding: 8px;
    font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease);
}
.swatch:hover { transform: scale(1.05); }
/* The samples the theme editor offers (UI-1 I2: were inline). */
.swatch--default { background: var(--color-primary); color: var(--color-primary-contrast); }
.swatch--indigo  { background: var(--violet-600); color: var(--neutral-0); }
.swatch--forest  { background: var(--green-500); color: var(--neutral-0); }
.swatch--sunset  { background: var(--red-500); color: var(--neutral-0); }

/* ---------- pricing ---------- */
.pricing { padding: var(--space-12) 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 920px) { .pricing-grid { grid-template-columns: 1fr; } }
.tier {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.tier--featured {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft), var(--shadow-md);
    position: relative;
}
.tier--featured::after {
    content: "Most popular"; position: absolute; top: -10px; left: 24px;
    background: var(--color-primary); color: var(--color-primary-contrast);
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: var(--font-size-xs); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.tier__name { font-weight: 600; font-size: var(--font-size-md); }
.tier__price { font-family: var(--font-family-heading); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.tier__price small { font-size: var(--font-size-md); font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; }
.tier__desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.tier__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tier__features li { display: flex; gap: 10px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ---------- final CTA ---------- */
.final-cta { padding: var(--space-12) 0 var(--space-9); }
.final-cta__inner {
    background: var(--color-text-primary); color: var(--neutral-0);
    border-radius: var(--radius-2xl);
    padding: var(--space-9) var(--space-8);
    text-align: center; position: relative; overflow: hidden;
}
.final-cta__inner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 50% 100%, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent 70%);
}
.final-cta h2 {
    position: relative; font-family: var(--font-family-heading);
    font-size: clamp(28px, 3.5vw, 44px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.1;
    margin-bottom: 12px; text-wrap: balance;
}
.final-cta p {
    position: relative; color: var(--neutral-300);
    font-size: var(--font-size-md); margin-bottom: var(--space-5);
    max-width: 50ch; margin-left: auto; margin-right: auto;
}
.final-cta__row { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.final-cta__inner .btn--primary { background: var(--neutral-0); color: var(--color-text-primary); }
.final-cta__inner .btn--primary:hover { background: var(--neutral-100); }
.final-cta__inner .btn--ghost { color: var(--neutral-300); }
.final-cta__inner .btn--ghost:hover { background: color-mix(in srgb, var(--neutral-0) 10%, transparent); color: var(--neutral-0); }

/* ---------- footer (overrides legacy rules above) ---------- */
.public-footer {
    background: var(--ink);
    padding: var(--space-9) 0 var(--space-5);
    border-top: 1px solid color-mix(in srgb, var(--neutral-0) 8%, transparent);
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--space-5); margin-bottom: var(--space-7);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h5 {
    font-size: var(--font-size-xs); text-transform: uppercase;
    letter-spacing: 0.06em; color: color-mix(in srgb, var(--neutral-0) 40%, transparent);
    font-weight: 500; margin-bottom: 12px;
}
.footer-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: color-mix(in srgb, var(--neutral-0) 60%, transparent); font-size: var(--font-size-sm); text-decoration: none; text-transform: none; }
.footer-grid a:hover { color: var(--neutral-0); }
.footer-tagline { color: color-mix(in srgb, var(--neutral-0) 50%, transparent); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); margin: 12px 0 var(--space-3); max-width: 28ch; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--neutral-0) 8%, transparent);
    font-size: var(--font-size-sm); color: color-mix(in srgb, var(--neutral-0) 35%, transparent);
    flex-wrap: wrap; gap: 12px;
}